<template>
  <div>
    <div class="login">
      <img
        src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019pILfAg7Avr1567732916.png"
      />
      <van-field v-model="text" placeholder="请输入账号" />
      <van-field v-model="password" type="password" placeholder="请输入密码" />
      <p><span>找回密码</span><span @click="gotoreg">注册/验证码登录</span></p>
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        block
        round
        @click="login"
      >
        立即登录
      </van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      text: "",
      password: "",
    };
  },
  methods: {
    gotoreg() {
      this.$router.push({ path: "/reg" });
    },
    login() {
      this.$API
        .login({ mobile: this.text, password: this.password, type: 1 })
        .then((res) => {
          console.log(res);
          Toast(res.data.msg);
          if (res.data.code == 200) {
            localStorage.setItem("token", res.data.data.remember_token);
            this.$router.push({ path: "/mine" });
          }
        });
    },
  },
};
</script>
<style lang="scss">
.login {
  width: 80%;
  margin: 40px auto;
  img {
    width: 80%;
    display: block;
    margin: 0 auto 60px;
  }
  p {
    font-size: 3.2vw;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
  }
}
</style>